import React from "react";
import { useState } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { connect } from "react-redux"; //引入高阶组件

// antd
import { Layout } from "antd";
import { DownOutlined, UserOutlined } from "@ant-design/icons";
import { Dropdown, Space } from "antd";
import { Avatar } from "antd";
import { useNavigate } from "react-router";
import store from "../../redux/store";
const { Header } = Layout;
function TopHeader(props) {
  // const [collapsed, setCollapsed] = useState(true);
  const {
    role: { roleName },
    username,
  } = JSON.parse(localStorage.getItem("token"));
  const navigate = useNavigate();
  // 头部点击事件，触发父组件NewsSandBox的changeC事件，向兄弟传递collapsed状态
  const changeCollapsed = () => {
    props.changeCollapsed();
  };
  // 退出
  const out = () => {
    localStorage.removeItem("token");
    navigate("/login");
  };
  const items = [
    {
      key: "1",
      label: <span>{roleName}</span>,
    },
    {
      key: "2",
      danger: true,
      label: <div onClick={out}>退出</div>,
    },
  ];
  return (
    <Header className="site-layout-background" style={{ padding: "0 16px" }}>
      {/* 直接将原来定义的状态替换成redux状态管理的状态 */}
      {props?.isCollpased ? (
        <MenuUnfoldOutlined onClick={changeCollapsed} />
      ) : (
        <MenuFoldOutlined onClick={changeCollapsed} />
      )}
      <div style={{ float: "right" }}>
        <span>
          欢迎<span style={{ color: "#1890ff" }}>{username}</span>回来
        </span>
        <Dropdown menu={{ items }}>
          <i>
            <Space>
              <Avatar size="large" icon={<UserOutlined />} />
              <DownOutlined />
            </Space>
          </i>
        </Dropdown>
      </div>
    </Header>
  );
}
//利用结构赋值 因为之前有合并reducer所以要在此结构拿到这个里边的数据
const mapStateToProps = ({ CollapseReducer: { isCollpased } }) => {
  return {
    isCollpased,
  };
};
// 提交action
const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: "change_collapsed", //action的名字
    };
  },
};
export default connect(mapStateToProps, mapDispatchToProps)(TopHeader);
